<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>Document</title>
        <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
<body>
    <div id = 'app'>
        <div>
            <el-button>默认按钮</el-button>
            <button>普通按钮</button>
            <el-button type="primary" disabled>提交按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
            <el-button type="success" loading>数据加载中</el-button>
            <el-button type="info" size="small">信息按钮</el-button>
            <el-button type="warning"size='mini'>警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
            <el-button type='text'>超链接按钮</el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </div>
        <el-table border stripe :data = 'userList' style="width: 100%;">
            <el-table-column type="selection"  width="50"></el-table-column> 
            <el-table-column type="index" label ='序号' width="50"></el-table-column> 
             <el-table-column prop ='name' label ='姓名' width = '180'></el-table-column>
            <el-table-column prop ='age' label ='年龄' width = '180'></el-table-column>
            <el-table-column prop ='email' label ='email' width = '220'></el-table-column>
            
        </el-table>
     <table>
         <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>email</td>
         </tr>
         <tr v-for ='(item,index) in userList'>
             <td>{{index}}</td>
             <td>{{item.name}}</td>
             <td>{{item.age}}</td>
             <td>{{item.email}}</td>
         </tr>
     </table>
    </div>
<script src = 'vue.js'></script>
<script src = 'axios.js'></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data () {
            return {
                userList: []
            }
        },

        created () {
            this.showUserList()
        },
        methods: {
            showUserList(){
                // 通过axios访问远程接口
                const request = axios.create({
                    baseURL: 'http://localhost:8080'
                })
                request
                .get('/user/list')
                .then((response) =>{
                    console.log('数据获取成功',response)
                    this.userList = response.data
                })
                .catch((error)=>{
                    console.log('数据获取失败',error)
                })
            }
        }

        
    })
</script>
</body>
</html>